<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";
//订单状态值下拉框选项
const seriesOptions=[
  {
    value: '',
    label: '- 全部 -',
  },
  {
    value: '待支付',
    label: '待支付',
  },
  {
    value: '已支付',
    label: '已支付',
  },
  {
    value: '已取消',
    label: '已取消',
  },
]
//搜索的订单状态值
const firstOrderSeries = ref("");
//定义藏表格的引用
const firstOrderRef = ref();
//选择的当前藏品
const currentFirstorder = ref();
//存储
const firstOrder=ref({
  records:[]
});
//藏品相关数据加载中
const orderPageLoading = ref(true);
//当前页码
const orderPageIndex = ref(1);

const headers = {
  Authorization: localStorage.getItem("auth")
}
//搜索的买方id
const buyerId = ref("");
//搜索的卖方id
const sellerId = ref("");
//搜索的藏品名称
const name = ref("");
//从接口获取分页数据
const getFirstOrder =()=>{
  orderPageLoading.value = true;
  axios.post("/api/order",{
    pageIndex: orderPageIndex.value,
    pageSize: 8,
    orderformStateName: firstOrderSeries.value,
    name: name.value,
    buyerId:buyerId.value,
    sellerId:sellerId.value
  },{
    headers
  }).then(response=>{
    console.log("获取成功");
    console.log(response.data.value);
    firstOrder.value = response.data.value;  //将从接口获取到的数据，赋值给goodsPage对象
    orderPageLoading.value = false;
  }).catch(error=>{
    console.log("获取失败", error.response);
    orderPageLoading.value = false;
  })
}
getFirstOrder();
//表示单击行
const handleRowClick = row => {
  firstOrderRef.value.data.forEach(r => {
    firstOrderRef.value.toggleRowSelection(r, r.id == row.id);
  })
  currentFirstorder.value = row;
  console.log("点击一行了",row);
}
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentFirstorder.value = multipleSelection.value[0];
  } else {
    currentFirstorder.value = {};
  }
}
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单中心</el-breadcrumb-item>
    <el-breadcrumb-item>一级市场订单</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
        成交状态:
        <el-select v-model="firstOrderSeries" placeholder="请选择" style="width:140px">
          <el-option
              v-for="item in seriesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>&nbsp;&nbsp;
        <el-input v-model="name" placeholder="藏品名称" style="width:160px" />&nbsp;&nbsp;
        <el-input v-model="buyerId" placeholder="买方用户ID" style="width:160px" />&nbsp;&nbsp;
        <el-input v-model="sellerId" placeholder="卖方用户ID" style="width:160px" />&nbsp;&nbsp;
        <el-button type="primary" @click="getFirstOrder">搜索</el-button><el-divider border-style="double" />
      </div>
      <div>

      </div>
    </div>
    <div>

      <el-table :data="firstOrder.records"
                v-loading="orderPageLoading"
                row-key="id"
                ref="firstOrderRef"
                @current-change="handleRowClick"
                @selection-change="handleSelectionChange"
                stripe
                highlight-current-row
                empty-text="暂无数据"
                style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="buyerId" label="买方用户ID" />
        <el-table-column prop="sellerId" label="卖方用户ID" />
        <el-table-column prop="name" label="藏品名称" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="free" label="手续费" />
        <el-table-column prop="payedTime" label="挂单时间" />
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="orderformStateName" label="成交状态" />
      </el-table>
      <el-pagination background layout="prev, pager, next"
                     :default-page-size="firstOrder.pageSize"
                     :total="firstOrder.total"
                     v-model:current-page="orderPageIndex"
                     @current-change="getFirstOrder"
      />

    </div>
  </div>
</template>

<style scoped>

</style>